HTML INTRODUCTION

July 30, 2002 - 0:0
In this chapter you will be introduced to the concepts of linear media and hypermedia. You will learn about HTML and the basics of document structure.

OBJECTIVES Upon completing this section, you should be able to: 1. Explain hypermedia vs. linear media 2. Define HTML 3. Describe the Basic Document Structure Identify the sub-elements of the header Linear Media Linear media is a term used to describe any media where there is a defined beginning and a linear progression to the end. Forms of linear media such as movies, audio and videotapes, and most books are organized with this expectation. The World Wide Web, however, is organized very differently.

Hypermedia Hypermedia is where the user simply selects the next item of interest and is immediately transported to that new location. A good example is an audio CD where you can choose song 5 and listen to it almost immediately. Contrast this with an audiotape where you would have to scan through from your current location on the tape to the beginning of the song.

When this concept is applied to text you get hypertext, where by {Clicking} on a link or hotspot (hyperlink) you are immediately transported to a new location within the same page or to a new page altogether.

When you interlink a large number of pages of text on different computers all over the world, you get a spider web-like system of links and pages. This is known as the World Wide Web - a system whereby pages stored on many different web servers, connected to the Internet, are linked together.

The system is useful because all of the pages are created in the same format. This format or "language" is called HTML, (Hypertext Markup Language) a subset of an international standard for electronic document exchanged called SGML (Standard Generalized Markup Language).

In this class you will be introduced to the format of an HTML page, you will learn about the components that make up HTML, and how to create pages that can be published on the World Wide Web.

What is HTML Markup? HTML is a set of logical codes (markup) in parentheses that constitute the appearance of a web document and the information it contains.

E.g. This text would appear bold in the browser The codes are enclosed by less than "", and greater than ">" brackets. These bracketed codes of the markup are commonly referred to as tags.

HTML codes are always enclosed between brackets and are not case-sensitive; meaning, it does not matter whether you type them in upper case or lower case. However, tags are easier to recognize in a web document if they are capitalized.

Most elements have an opening element (tag) and a closing element (tag) distinguished by the "/" inside the "" opening bracket.

The first word or character that appears inside the "" opening bracket is called the element. An element is a command that tells the browser to do something, such as FONT>.

Words that follow the element and are contained inside the ">" bracket of the opening tag are called attributes. Attributes are not repeated or contained in the closing element (tag). Confused? Attributes are another way of describing the element's properties. For instance, a t-shirt can have several properties or "attributes" - the t-shirt's color, size, material etc. are all attributes.

Attributes that appear to the right of the element are separated by a space, and followed by an equal sign. The value of the attribute is contained in quotes. In the following example the element is FONT, the attribute is COLOR, and the value of that attribute is BLUE.

E.g. FONT COLOR="BLUE">This text would be blue/FONT> Most HTML elements have more than one attribute.

E.g. FONT COLOR="BLUE" SIZE="+1">This text would be blue and one size larger than normal/FONT> Document Structure The way a document is marked up with elements and their attributes is according to a Document Type Definition (DTD). These are the rules that govern the way in which a document can be marked up.

The authoritative source for information about HTML and the HTML DTD is the World Wide Web Consortium (W3C) at http://www.w3.org. The World Wide Web Consortium is a not-for-profit organization that coordinates the evolution of the Web. It includes the Internet Engineering Task Force, the group of people who make recommendations for new markup.

A Basic Document An element called HTML surrounds the whole document. This element contains two sub-elements, HEAD and BODY. These elements are required to form any HTML document.

HTML> HEAD> has sub-elements that define header material: TITLE> document title. The title of your document is what appears in a web browser's Favorite or Bookmark list. Your document's title should be as descriptive as possible. Search engines on the Internet use the document's title for indexing purposes. /TITLE> BASE> can be used to record the document's location in the form of a URL. The URL recorded here may be used to resolve a relative URL (necessary if the document is not accessed in its original location). /BASE> ISINDEX> indicates to the browser that the document is an index document. This is used only if the document is on a server that does indexing.

/ISINDEX> LINK> indicates a relationship between this document and some other object on the Web. /LINK> META> provides information such as the page's keywords and description that appears in HTTP headers. /META> SCRIPT> contains either JAVA Script or VB Script /SCRIPT> STYLE> contains information used by cascading style sheets /STYLE> /HEAD> BODY> the remaining HTML elements are contained within these tags.

/BODY> /HTML> Note: a framed document is formatted differently than a basic document and is discussed in the advanced section of this course. Review Questions 1. What does HTML stand for? 2. What is an Element? 3. What are the Attributes of an Element? 4. What are the three basic elements of an HTML document? What are the elements that can be contained in the header of the document